<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{{ PRODUCT_NAME }}}</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    html {
      /* fix mobile viewport menu bar on iOS */
      height: -webkit-fill-available;
    }

    body {
      height: 100%;
      /* fix mobile viewport menu bar on iOS */
      height: -webkit-fill-available;
      width: 100%;
      text-align: center;
    }

    #unity-container {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
#if CONTAINER_BACKGROUND_COLOR
      background-color: {{{CONTAINER_BACKGROUND_COLOR}}};
#endif
    }

    /* Default values, might be overwritten by aspect ratio media queries */
    #unity-canvas {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

#if MIN_ASPECT_RATIO
    @media (min-aspect-ratio: {{{ MIN_ASPECT_RATIO }}}) {
      #unity-canvas {
        width: auto;
        height: 100%;
        aspect-ratio: {{{ MIN_ASPECT_RATIO }}};
      }
    }
#endif

#if MAX_ASPECT_RATIO
    @media (max-aspect-ratio: {{{ MAX_ASPECT_RATIO }}}) {
      #unity-canvas {
        width: 100%;
        height: auto;
        aspect-ratio: {{{ MAX_ASPECT_RATIO }}};
      }
    }
#endif

    #unity-loading-container {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 40px;

      opacity: 1;
      visibility: visible;
      transition: 800ms linear;
    }

    #unity-loading-container.finished {
      opacity: 0;
      visibility: collapse;
    }

    #unity-loading-container .logo {
      width: 15%;
      height: 15%;
    }

    #unity-loading-bar {
      position: relative;
      width: 40%;
      height: 10px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
    }

    #unity-loading-bar-inner {
      position: absolute;
      left: 0%;
      top: 0%;
      width: 1%;
      height: 100%;
      background-color: #ccc;
      border-radius: 10px;
      transition: 400ms linear;
    }
  </style>
  <link rel="stylesheet" href="debug-console.css">
</head>

<body>
  <div id="unity-container">
    <canvas id="unity-canvas"></canvas>
  </div>
  <div id="unity-loading-container">
    <img src="logo.svg" class="logo" alt="Logo {{{ COMPANY_NAME }}}">
    <div id="unity-loading-bar">
      <div id="unity-loading-bar-inner"></div>
    </div>
  </div>
  <script src="Build/{{{ LOADER_FILENAME }}}"></script>
  <script>
    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
    var config = {
      dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
      frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
      codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
        memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
      streamingAssetsUrl: "StreamingAssets",
      companyName: "{{{ COMPANY_NAME }}}",
      productName: "{{{ PRODUCT_NAME }}}",
      productVersion: "{{{ PRODUCT_VERSION }}}",
    };

    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if(isMobile) {
      // Define a maximum pixel ratio for mobile to avoid rendering at too high resolutions
      const maxPixelRatioMobile = 2.0;
      config.devicePixelRatio = Math.min(window.devicePixelRatio, maxPixelRatioMobile);
    }

    var canvas = document.querySelector("#unity-canvas");
    var loadingContainer = document.querySelector("#unity-loading-container");
    var loadingBar = document.querySelector("#unity-loading-bar-inner");

    var unityGame; // This variable can be used to access the application with .SendMessage() commands
    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = function() {
      createUnityInstance(canvas, config, function(progress) {
        loadingBar.style.width = 100 * progress + "%";
      }).then(function(unityInstance) {
        unityGame = unityInstance;
        loadingContainer.classList.add("finished");
      }).catch(function(message) {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
  <!-- Add an html debug console and handle unity rich text styling for both html and browser console-->
  <script src="./debug-console.js"></script>
</body>

</html>